<template>
  <view>
    <uni-card v-for="(editRow, index) in rwList">
      <uni-list>
        <uni-list-item
          v-for="item in listOption"
          :title="item.label"
          :note="editRow[item.prop]"
        >
        </uni-list-item>
      </uni-list>
      <view style="padding: 0 25upx">
        <uni-forms
          ref="formRef"
          label-position="top"
          :model="editRow.formData"
          label-width="100vw"
        >
          <template v-for="item in editRow.option">
            <uni-forms-item
              :label="item.label"
              :name="item.prop"
              required
              :rules="[
                {
                  required: true,
                  errorMessage: '字段为必填项',
                },
              ]"
            >
              <uni-easyinput
                v-if="
                  item.type == 'text' ||
                  item.type == 'input' ||
                  item.type == 'textarea'
                "
                type="text"
                v-model="editRow.formData[item.prop]"
              />
              <uni-data-select
                v-else-if="item.type == 'select'"
                v-model="editRow.formData[item.prop]"
                :localdata="item.optionItems"
              ></uni-data-select>
              <uni-data-select
                v-else-if="item.type == 'select'"
                v-model="editRow.formData[item.prop]"
                :localdata="item.selectOptions"
              ></uni-data-select>
              <uni-datetime-picker
                v-else-if="
                  ['datetime', 'date', 'datetimerange', 'daterange'].includes(
                    item.type
                  )
                "
                :type="item.type"
                v-model="editRow.formData[item.prop]"
              />

              <uni-data-checkbox
                v-else-if="item.type == 'radio' || item.type == 'checkbox'"
                v-model="editRow.formData[item.prop]"
                :localdata="item.optionItems"
                :multiple="item.type == 'checkbox'"
              ></uni-data-checkbox>
            </uni-forms-item>
          </template>
          <uni-forms-item label="现场照片">
            <Camera v-model="filesMap[index]" :limit="5"> </Camera>
          </uni-forms-item>
          <uni-forms-item label="隐患上报">
            <button type="danger" size="mini" @click="onShangbao(editRow)">
              上报隐患
            </button>
          </uni-forms-item>
        </uni-forms>
      </view>
      <button class="bottom" type="primary" @click="onSubmit(index)">
        提 交
      </button>
    </uni-card>
  </view>
</template>
<script>
export default {
  data() {
    return {
      id: "",
    };
  },
  onLoad(payload) {
    this.id = payload.id;
  },
};
</script>
<script setup>
import { ref, onMounted, getCurrentInstance, watch } from "vue";
import { apis as APIS } from "@/api/znxj/xjrw.js";
import { router } from "@/router/index.js";
import Camera from "@/components/camera.vue";
import { taskPoints } from "@/api/znxj/xjrw.js";
import { useFormJson } from "@/hooks/jsonToForm.js";
const listOption = ref([
  {
    label: "路线名称",
    prop: "routeName",
  },
  {
    label: "计划名称",
    prop: "planName",
  },
  {
    label: "点位名称",
    prop: "pointName",
  },
  {
    label: "点位编号",
    prop: "pointCode",
  },
]);

const filterForm = ref({
  id: "",
});
const formRef = ref();
const rwList = ref([]);
const filesMap = ref({});
const dataMap = ref({});
onMounted(() => {
  const { id } = getCurrentInstance().data;
  filterForm.value.id = id;
  APIS.getByPoint(filterForm.value).then((res) => {
    rwList.value = res.data.map((item, index) => {
      let formData = {};
      let option = [];
      try {
        formData.value = row.formData ? JSON.parse(row.formData) : {};
      } catch (e) {
        formData = {};
      }
      try {
        option = useFormJson(JSON.parse(item.formJson));
      } catch (e) {
        option = [];
      }
      filesMap.value[index] = [];
      dataMap.value[index] = formData;
      return {
        ...item,
        option,
        formData,
      };
    });
  });
});

const onSubmit = async (index) => {
  try {
    const res = await formRef.value[index].validate();
    let node = rwList.value[index];
    taskPoints
      .update({
        id: node.detialId,
        formData: JSON.stringify(node.formData),
        hiddenFileId: node.formData.hiddenFileId,
        planTaskId: node.cid,
        pointCode: node.pointCode,
        pointId: node.id,
        pointName: node.pointName,
        formJson: node.formJson,
      })
      .then((res) => {
        uni.showToast({
          title: "修改成功",
          icon: "success",
        });
        setTimeout(() => {
          router.back();
        }, 500);
      });
  } catch (e) {
    return false;
  }
};
const onShangbao = (row) => {
  router.toPage({
    path: "/pages/yhpc/yhdj/components/dj",
    params: {
      inspectionPlanTaskId: row.cid,
      inspectionPlanTaskPointId: row.detialId,
      tempType: 0,
    },
  });
};

watch(
  () => filesMap,
  (newData) => {
    Object.keys(newData.value).forEach((item) => {
      if (newData.value[item].length === 0) {
        dataMap.value[item].hiddenFileId = "";
      } else {
        dataMap.value[item] = newData.value[item]
          .map((item) => item.id)
          .join(",");
      }
    });
  },
  {
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.navbar {
  display: flex;
  height: 40px;
  padding: 0 5px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 15px;
    position: relative;

    &.current {
      color: blue;

      &:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 44px;
        height: 0;
        // border-bottom: 2px solid $base-color;
      }
    }
  }
}
</style>
